<template>
	<view>
		<view class="quick-head" v-if="data.setnavi&&data.setnavi.type==='0'">
			<view class="quick-modal " v-if="data.quick_icon">
				<view class="quick-modal-bg"></view>
				<view class="quick-head quick-modal-pic flex-y-center flex-x-center">
					<view :class="['quick-icon', data.__device]" direction="all">
						<view style="position:relative;">
							<view :animation="data.animationPlus" class="quick-zfb" v-if="!data.home_icon">
								<navigator hoverClass="none" openType="reLaunch" url="/pages/index/index">
									<image class="quick-dial" :src="data.setnavi.home_img"></image>
								</navigator>
							</view>
							<view :animation="data.animationMapPlus" @tap="$emit('map_power',$event)" class="quick-dial quick-zfb" :style="{backgroundImage:'url('+ data.dapp.option.quick_map.icon +')',backgroundSize: upx_100+' '+upx_100}"
							 v-if="data.dapp.option.quick_map.status==1"></view>
							<view :animation="data.animationPic" @tap="$emit('to_dial',$event)" class="quick-dial quick-zfb" :style="{backgroundImage:'url('+ data.dapp.dial_pic +')',backgroundSize: upx_100+' '+upx_100}"
							 v-if="data.dapp.dial==1&&data.dapp.dial_pic"></view>
							<navigator hoverClass="none" openType="navigate" :url="'/pages/web/web?url=' + data.dapp.option.web_service_url" v-if="data.dapp.option.web_service_status==1">
								<view :animation="data.animationcollect" class="quick-zfb">
									<image class="quick-dial" :src="data.dapp.option.web_service"></image>
								</view>
							</navigator>
							<block v-if="data.dapp.show_customer_service&&data.dapp.show_customer_service==1&&data.dapp.service">
								<button class="float-icon-btn" openType="contact" :sessionFrom="data.__user_info.nickname" style="border:0upx solid #ffffff;padding:0px;display:inline;background-color:transparent;"
								 v-if="data.__platform=='wx'">
									<view :animation="data.animationTranspond" class="quick-zfb" style="display:inline-block;top:0;">
										<image class="quick-dial" :src="data.dapp.service"></image>
									</view>
								</button>
								<view class="float-icon-btn" v-if="data.__platform=='my'">
									<view :animation="data.animationTranspond" class="quick-zfb">
										<view class="flex-x-center flex-y-center" style="z-index:2;width: 100%;border-radius:50%;height: 100%;position: absolute;left: 0;top:0;opacity: 0">
											<contact-button :scene="data.__alipay_mp_config.cs_scene" size="40" :tntInstId="data.__alipay_mp_config.cs_tnt_inst_id"></contact-button>
										</view>
										<image class="quick-dial" :src="data.dapp.service"></image>
									</view>
								</view>
							</block>
							<block v-if="data.dapp.option.wxapp.status==1">
								<navigator :appId="data.dapp.option.wxapp.appid" data-open_type="wxapp" hoverClass="none" openType="navigate" :path="data.dapp.option.wxapp.path"
								 target="miniProgram" v-if="data.__platform=='wx'">
									<view :animation="data.animationInput" class="quick-zfb">
										<image class="quick-dial" :src="data.dapp.option.wxapp.pic_url"></image>
									</view>
								</navigator>
								<view :animation="data.animationInput" class="quick-zfb" :data-app-id="data.dapp.option.wxapp.appid" :data-path="data.dapp.option.wxapp.path"
								 onTap="openWxapp" v-if="data.__platform=='my'">
									<image class="quick-dial" :src="data.dapp.option.wxapp.pic_url"></image>
								</view>
							</block>
							<view @tap="$emit('cutover',$event)" class="flex-col flex-y-center flex-x-center quick-bg" style="z-index:20;position:relative;bottom:0">
								<text class="quick-text">收起</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view :class="['quick-icon',data.__device]" direction="all" v-else>
				<view @tap="$emit('cutover',$event)" class="flex-col flex-y-center flex-x-center quick-bg">
					<text class="quick-text">快捷</text>
					<text class="quick-text">导航</text>
				</view>
			</view>
		</view>
		<view class="float-icon" direction="all" v-if="data.setnavi&&data.setnavi.type==='1'">
			<navigator hoverClass="none" openType="reLaunch" url="/pages/index/index" v-if="!data.home_icon">
				<image class="dial" :src="data.setnavi.home_img"></image>
			</navigator>
			<view @tap="$emit('map_power',$event)" class="dial" :style="{backgroundImage:'url('+ data.dapp.option.quick_map.icon +')',backgroundSize: upx_100+' '+upx_100}"
			 v-if="data.dapp.option.quick_map.status==1"></view>
			<view @tap="$emit('to_dial',$event)" class="dial" :style="{backgroundImage:'url('+ data.dapp.dial_pic +')',backgroundSize: upx_100+' '+upx_100}"
			 v-if="data.dapp.dial==1&&data.dapp.dial_pic"></view>
			<navigator hoverClass="none" openType="navigate" :url="'/pages/web/web?url='+data.dapp.option.web_service_url" v-if="data.dapp.option.web_service_status==1">
				<image class="dial" :src="data.dapp.option.web_service"></image>
			</navigator>
			<block v-if="data.dapp.show_customer_service&&data.dapp.show_customer_service==1&&data.dapp.service">
				<button class="float-icon-btn" openType="contact" :sessionFrom="data.__user_info.nickname" style="height:100%" v-if="data.__platform=='wx'">
					<image class="dial" :src="data.dapp.service"></image>
				</button>
				<view class="float-icon-btn" style="position: relative" v-if="data.__platform=='my'">
					<view style="z-index:2;width: 100%;height: 100%;position: absolute;left: 0;top:0;opacity: 0">
						<contact-button :scene="data.__alipay_mp_config.cs_scene" :tntInstId="data.__alipay_mp_config.cs_tnt_inst_id"></contact-button>
					</view>
					<image class="dial" :src="data.dapp.service" style="z-index:1"></image>
				</view>
			</block>
			<block v-if="data.dapp.option.wxapp.status==1">
				<navigator :appId="data.dapp.option.wxapp.appid" data-open_type="wxapp" hoverClass="none" openType="navigate" :path="data.dapp.option.wxapp.path"
				 target="miniProgram" v-if="data.__platform=='wx'">
					<image class="dial" :src="data.dapp.option.wxapp.pic_url"></image>
				</navigator>
				<view @tap="$emit('openWxapp',$event)" :data-app-id="data.dapp.option.wxapp.appid" :data-path="data.dapp.option.wxapp.path" v-if="data.__platform=='my'">
					<image class="dial" :src="data.dapp.option.wxapp.pic_url"></image>
				</view>
			</block>
		</view>

	</view>
</template>
<script>var myVue = {};
	export default {
		computed: {
			uxp_100() {
				return uni.upx2px(100)+'px';
			}
		},
		props:['data'],
		data(){
			return{
				
			}
		}
	}
</script>
<style scoped>
.quick-modal {
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    z-index: 9999;
    transition: 200ms;
}

.quick-modal.show {
    visibility: visible;
    opacity: 1;
}

.quick-modal .quick-modal-bg {
    background: rgba(0,0,0,0.3);
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.quick-modal .quick-modal-pic {
    background: rgba(0,0,0,0.25);
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.quick-modal .quick-modal-close image {
    width: 50upx;
    height: 50upx;
    margin-top: 50upx;
}

.quick-text {
    color: #ffffff;
    font-size: 9pt;
}

.quick-bg {
    background-color: rgba(0,0,0,0.7);
    border-radius: 50%;
    height: 100upx;
    width: 100upx;
}

.quick-zfb {
    display: inline;
    opacity: 0;
    position: absolute;
    bottom: 0;
}

.quick-icon {
    position: fixed;
    z-index: 99;
    right: 50upx;
    bottom: calc(140upx + var(--window-bottom));
}

.quick-dial {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
    display: block;
    mmargin-bottom: 24upx;
}

.float-icon {
    bottom: 170upx!important;
}

.quick-head>.device_iphone_x {
    padding-bottom: 65upx;
}
</style>